<template>
  <div>
    <form action="/">
      <van-search
        v-model="value"
        show-action
        placeholder="请输入搜索关键词"
        @search="onSearch"
        @cancel="onCancel"
      />
      <ul>
<!--      <ul v-if="this.value">-->

        <li v-for="data in computedList" :key="data.id">

          <div>
            {{data.title}}
          </div>
        </li>
      </ul>
    </form>

  </div>
</template>

<script>
import Vue from 'vue';
import { Search } from 'vant';
import { Toast } from 'vant';

Vue.use(Search);
export default {
  name: 'search',
  data() {
    return {
      value: '',
    };
  },
  computed:{
    //模糊查询
    computedList() {
      return this.$store.state.cinemaList.filter(item => {
        return   item.title.toUpperCase().
          includes(this.value.toUpperCase())
      })
    }
  },
  mounted() {
    if(this.$store.state.cinemaList.length === 0){
      this.$store.dispatch('getCinemaData')
    }
  },
  methods: {
    onSearch(val) {
      Toast(val);
    },
    onCancel() {
      this.$router.back()
    },
  },
}
</script>

<style scoped>

</style>
